<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- 引入Vue -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import Element UI -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <link rel="stylesheet" href="css/Myself.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="150px">
            <div style="width: 1400px;margin: 0 auto">
                <img src="../imgs/logo.png" width="300px">
                <a href="">首页</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">热点资讯</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">商家入驻</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">社会招聘</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">校园招聘</a>
                <el-divider direction="vertical"></el-divider>
                <a href="">帮助</a>
                <el-divider direction="vertical"></el-divider>
                <span style="float: right;font-size: 15px;margin-top: 35px">
                    欢迎回来<a href="JavaScript:void(0)" style="text-decoration: none">{{nickname}}</a>
                    &nbsp&nbsp&nbsp
                    <a href="JavaScript:void(0)" style="text-decoration: none" @click="logout">退出登录</a>
                </span>
            </div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        default-active="5-1"
                        class="el-menu-vertical-demo"
                        :unique-opened="true"
                        @Select="handleSelect"
                        @open="handleOpen"
                        @close="handleClose">
                    <el-menu-item index="1">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">我的</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-s-order"></i>
                        <span slot="title">我的订单</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-shopping-cart-full"></i>
                        <span slot="title">我的购物车</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">修改密码</span>
                    </el-menu-item>
                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-map-location"></i>
                            <span>地址管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="5-1">新增地址</el-menu-item>
                            <el-menu-item index="5-2">地址列表</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-card style="width: 500px;text-align: center;margin: 0 auto;padding: 0">
                    <el-form :model="information" ref="information" :rules="rules" label-width="80px">
                        <el-form-item label="地区" prop="area">
                            <el-cascader
                                    ref="area"
                                    size="small"
                                    :options="areas"
                                    placeholder="----请选择----"
                                    @change="handleChange"
                                    filterable>
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="address">
                            <el-input v-model="information.address" placeholder="请输入详细地址"
                                      style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submit">添加</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                nickname: localStorage.getItem('nickname'),
                areas: [],
                information: {
                    userId: localStorage.getItem('userId'),
                    address: '',
                },
                rules: {
                    recipients: [
                        {required: true, message: '请输入收货人', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {
                            relax: /^(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                            message: '请输入正确的手机号',
                            trigger: 'blur'
                        }
                    ],
                    address: [
                        {required: true, message: '请输入详细地址', trigger: 'blur'},
                        {min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur'}
                    ],
                    area: [
                        {required: true, message: '请选择地区', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key)
                if (key === '1'){
                    location.href = 'Myself.html'
                } else if (key === '2'){
                    location.href = 'Order.html'
                } else if (key === '3'){
                    location.href = 'ShoppingCart.html'
                } else if (key === '4'){
                    location.href = 'ChangePassword.html'
                }else if (key === '5-2'){
                    location.href = 'AddressList.html'
                }
            },
            handleOpen(key, keyPath) {
                console.log("handleOpen = " + key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log("handleClose = " + key, keyPath);
            },
            handleChange() {
                /**
                 * 将选中的地址节点路径保存到本地存储中
                 * 该代码片段没有参数和返回值，因为它是一个独立的代码块，旨在执行特定的DOM操作和数据处理。
                 */
                const textArr = []; // 创建一个空数组，用于存储节点路径标签
                const arr = this.$refs["area"].getCheckedNodes(); // 获取所有被选中的节点
                arr.forEach((i) => {
                    textArr.push(i.pathLabels); // 将每个节点的路径标签添加到textArr数组中
                });
                console.log(textArr) // 打印textArr数组，用于验证或调试
                localStorage.setItem('address', textArr); // 将textArr数组保存到本地存储中的address键下
            },
            submit() {
                let item = localStorage.getItem('address');
                let s = item.replace(/,/g, '');
                // 将省市区数据和具体地址进行拼接
                v.information.address = s + v.information.address;
                console.log(v.information.address)
                axios.post('/address/insert', v.information).then(function (response) {
                    if (response.data.state === 20000) {
                        v.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        location.href = '../user/AddressList.html'
                    } else {
                        v.$message({
                            message: '添加失败',
                            type: 'error'
                        });
                    }
                });
            },
            logout() {
                location.href = '../login.html'
            },
        },
        created: function () {
            // 获取省市区数据
            axios.get('/pca-code.json').then(function (response) {
                v.areas = response.data;
            });
        }
    })
</script>
</html>